<template>
    <div class="qilin-wifes">
        <el-card>
            <QilinSearch :searchConfig.sync="searchConfig" @searchData="getTableData()">
                <template v-slot:dateRange="slotData">
                    <el-date-picker v-model="searchConfig.submitData.startTime" type="datetime"
                        placeholder="请输入开始时间" format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placement="bottom-start"
                    ></el-date-picker>
                    <span class="search-separate">-</span>
                    <el-date-picker v-model="searchConfig.submitData.endTime" type="datetime"
                        placeholder="请输入结束时间" format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placement="bottom-start"
                    ></el-date-picker>
                </template>
            </QilinSearch>
        </el-card>
        <el-card>
            <QilinTable :tableConfig.sync="tableConfig" @changeCurrentPage="handleCurrentPage"
                @changeCurrentSize="handleSizeChange"
            >
                <template v-slot:role="slotData">
                    <span>{{getRole(slotData.data.scope.row.role)}}</span>
                </template>
                <template v-slot:userId="slotData">
                    <span>{{slotData.data.scope.row.userId.name}}</span>
                </template>
            </QilinTable>
        </el-card>
        <QilinDialog :dialogConfig.sync="dialogConfig" @handleClose="closeDialog"
            @submitConfirm="submitData('formData')"
        >
            <QilinForm :formConfig.sync="formConfig" ref="formData"></QilinForm>
        </QilinDialog>
        <QilinDialog :dialogConfig.sync="viewDialogConfig" @handleClose="closeViewDialog">
            <QilinView :viewConfig.sync="viewConfig">
                <template v-slot:role="slotData">
                    <span>{{getRole(slotData.data.data)}}</span>
                </template>
                <template v-slot:userId="slotData">
                    <span>{{slotData.data.data.name}}</span>
                </template>
            </QilinView>
        </QilinDialog>
    </div>
</template>
<script>

import {
    getWifeData,
    insertWifeData,
    updateWifeData,
    deleteWifeData,
    getRoleWifeData
} from "@/api/harem/index.js";
import {
    getUserData
} from "@/api/message/index.js";
export default {
    data(){
        return {
            searchConfig:{
                itemConfig:[
                    {
                        labelName:"选择时间",
                        type:"slot",
                        slotName:"dateRange"
                    }
                ],
                submitData:{
                    startTime:"",
                    endTime:""
                },
                buttonConfig:[
                    {
                        btnName:"添加",
                        type:"primary",
                        size:"small",
                        click:this.insertData
                    }
                ]
            },
            tableConfig:{
                headerConfig:[
                    {
                        label:"序号",
                        type:"sortIndex",
                        width:60
                    },
                    {
                        label:"姓名",
                        prop:"name"
                    },
                    {
                        label:"年龄",
                        prop:"age"
                    },
                    {
                        label:"角色",
                        prop:"role",
                        type:"slot",
                        slotName:"role"
                    },
                    {
                        label:"所属人",
                        prop:"userId",
                        type:"slot",
                        slotName:"userId"
                    },
                    {
                        label:"关系日",
                        prop:"date",
                        width:180,
                        type:"date",
                        format:"yyyy-MM-dd"
                    },
                    {
                        label:"人物描述",
                        prop:"detail",
                        ellipsis:true
                    },
                    {
                        label:"操作",
                        type:"operate",
                        width:220,
                        operateOptions:[
                            {
                                buttonName:"查看",
                                buttonType:"primary",
                                buttonSize:"mini",
                                buttonEvent:this.viewData
                            },
                            {
                                buttonName:"编辑",
                                buttonType:"warning",
                                buttonSize:"mini",
                                buttonEvent:this.updateData
                            },
                            {
                                buttonName:"删除",
                                buttonType:"danger",
                                buttonSize:"mini",
                                buttonEvent:this.deleteData
                            }
                        ]
                    }
                ],
                tableData:[],
                paginationsObj:{
                    currentPage:1, //当前页
                    pageSize:5, //当前每页数量
                    pageSizes:[5,10,15], //每页显示多少条选项集
                    total:0, //表格总数量
                    layout:"total,sizes,prev,pager,next,jumper"
                }
            },
            dialogConfig:{ //弹窗的配置对象
                isShow:false,
                title:"添加佳丽信息"
            },
            formConfig:{
                elFormConfig:{
                    labelWidth:"80px"
                },
                itemConfig:[
                    {
                        dataName:"name",
                        labelName:"姓名",
                        type:"input",
                        inputType:"text",
                        width:12,
                        validate:[
                            {
                                required:true,
                                message:"请输入姓名",
                                trigger:"blur"
                            }
                        ]
                    },
                    {
                        dataName:"age",
                        labelName:"年龄",
                        type:"input",
                        inputType:"number",
                        width:12,
                        validate:[
                            {
                                required:true,
                                message:"请输入年龄",
                                trigger:"blur"
                            }
                        ]
                    },
                    {
                        dataName:"role",
                        labelName:"角色",
                        type:"select",
                        dataListName:"roleList",
                        multiple:true,
                        collapseTags:true,
                        width:12
                    },
                    {
                        dataName:"userId",
                        labelName:"所属人",
                        type:"select",
                        dataListName:"userIdList",
                        loadMore:this.loadMore,
                        width:12,
                        validate:[
                            {
                                required:true,
                                message:"请选择所属人",
                                trigger:"change"
                            }
                        ]
                    },
                    {
                        dataName:"date",
                        labelName:"关系日",
                        type:"dateSelect",
                        dateType:"date",
                        width:12
                    },
                    {
                        dataName:"detail",
                        labelName:"描述",
                        type:"input",
                        inputType:"textarea",
                        rows:3,
                        width:24
                    },
                    {
                        dataName:"images",
                        labelName:"相册",
                        type:"uploadImage",
                        showFileList:true,
                        limit:6,
                        width:24,
                        validate:[
                            {
                                required:true,
                                message:"请上传图片",
                                trigger:"change"
                            }
                        ]
                    }
                ],
                selectLists:{
                    roleList:[],
                    userIdList:[]
                },
                submitData:{
                    name:"",
                    age:"",
                    role:"",
                    userId:"",
                    detail:"",
                    images:""
                }
            },
            currentPage:1, //当前下拉菜单数据第一页
            total:0, //下拉数据的总数目
            viewDialogConfig:{ //查看时的弹窗配置
                isShow:false,
                title:"查看佳丽信息"
            },
            viewConfig:{
                itemConfig:[
                    {
                        type:"text",
                        label:"姓名",
                        value:"name",
                        col:12
                    },
                    {
                        type:"text",
                        label:"年龄",
                        value:"age",
                        col:12
                    },
                    {
                        type:"slot",
                        slotName:"role",
                        label:"角色",
                        value:"role",
                        col:12
                    },
                    {
                        type:"slot",
                        slotName:"userId",
                        label:"所属人",
                        value:"userId",
                        col:12
                    },
                    {
                        type:"date",
                        label:"关系日",
                        value:"date",
                        format:"yyyy-MM-dd",
                        col:12
                    },
                    {
                        type:"text",
                        textarea:true,
                        label:"描述",
                        value:"detail",
                        col:24
                    },
                    {
                        type:"image",
                        label:"图库",
                        value:"images",
                        autoValue:true,
                        col:24
                    }
                ],
                viewData:{
                    name:"",
                    age:"",
                    role:"",
                    userId:"",
                    date:"",
                    detail:"",
                    images:""
                }
            }
        }
    },
    computed:{
        getRole(){
            return function(role){
                return role.map((item)=>{
                    return item.roleName;
                }).join(" & ");
            };
        }
    },
    methods:{
        // 下拉滚动加载事件监听
        loadMore(){
            if(this.formConfig.selectLists.userIdList.length < this.total){
                this.currentPage++;
                this.getUserIdData(this.currentPage,10,"loadmore");
            };
        },
        // 点击添加按钮事件监听
        insertData(){
            this.dialogConfig.title="添加佳丽信息";
            this.dialogConfig.isShow=true;
            this.getRoleData();
            this.getUserIdData();
        },
        //关闭弹窗事件监听
        closeDialog(){
            this.$refs["formData"].formResetFields();
            this.dialogConfig.isShow=false;
        },
        // 点击确认添加按钮事件监听
        submitData(refName){
            this.$refs[refName].formValidate((valid)=>{
                if(valid){
                    // console.log(this.formConfig.submitData);
                    let formData=new FormData();
                    formData.append("name",this.formConfig.submitData.name);
                    formData.append("age",+this.formConfig.submitData.age);
                    formData.append("date",this.formConfig.submitData.date);
                    formData.append("detail",this.formConfig.submitData.detail);
                    formData.append("userId",this.formConfig.submitData.userId);
                    formData.append("role",this.formConfig.submitData.role.join(","));
                    this.formConfig.submitData.images.forEach((item)=>{
                        if(item.raw){ //表示新上传的图片
                            formData.append("images",item.raw);
                        }else if(item.fileName){ //表示未编辑的图片
                            formData.append("oldImages",item.fileName);
                        };
                    });
                    if(this.formConfig.submitData._id){ //编辑时进入
                        updateWifeData(this.formConfig.submitData._id,formData).then((res)=>{
                            if(res.code === 1000){
                                this.$message({
                                    message:"编辑成功",
                                    type:"success"
                                });
                                this.closeDialog();
                                this.getTableData();
                            };
                        });
                    }else{
                        insertWifeData(formData).then((res)=>{
                            if(res.code === 1000){
                                this.$message({
                                    message:"添加成功",
                                    type:"success"
                                });
                                this.closeDialog();
                                this.tableConfig.paginationsObj.currentPage=1;
                                this.getTableData();
                            };
                        });
                    };
                };
            });
        },
        // 点击关闭查看弹窗事件监听
        closeViewDialog(){
            this.viewDialogConfig.isShow=false;
        },
        // 点击查看按钮事件监听
        viewData(row){
            // console.log(row);
            this.viewConfig.viewData=row;
            this.viewDialogConfig.isShow=true;
        },
        // 点击编辑按钮事件监听
        updateData(row){
            // console.log(row);
            this.dialogConfig.title="编辑佳丽信息";
            this.dialogConfig.isShow=true;
            this.getRoleData();
            this.getUserIdData();
            this.formConfig.submitData={
                ...row,
                role:row.role.map((item)=>{return item.roleType}),
                userId:row.userId._id
            };
        },
        // 点击删除按钮事件监听
        deleteData(row){
            this.$confirm("是否删除此条数据？","提示",{
                showCancelButton:true,
                closeOnClickModal:false,
                type:"warning"
            }).then(()=>{
                deleteWifeData(row._id).then((res)=>{
                    if(res.code === 1000){
                        this.$message({
                            message:"删除成功",
                            type:"success"
                        });
                        if(this.tableConfig.tableData.length === 1 && this.tableConfig.paginationsObj.currentPage != 1){
                            this.tableConfig.paginationsObj.currentPage-=1;
                        };
                        this.getTableData();
                    };
                });
            }).catch(()=>{
                console.log("取消删除操作");
            });
        },
        // 点击切换页码事件监听
        handleCurrentPage(val){
            // console.log(val);
            this.tableConfig.paginationsObj.currentPage=val;
            this.getTableData();
        },
        // 点击切换每页数量事件监听
        handleSizeChange(val){
            // console.log(val);
            this.tableConfig.paginationsObj.pageSize=val;
            this.getTableData();
        },
        // 初始化获取角色信息接口
        getRoleData(pageNum=1,pageSize=20){
            getRoleWifeData({
                pageNum,
                pageSize
            }).then((res)=>{
                if(res.code === 1000){
                    this.formConfig.selectLists.roleList=res.data.data.map((item)=>{
                        return {
                            label:item.roleName,
                            value:item.roleType
                        };
                    });
                };
            });
        },
        // 初始化获取所属人信息接口
        getUserIdData(pageNum=1,pageSize=10,type){
            getUserData({
                pageNum,
                pageSize
            }).then((res)=>{
                if(res.code === 1000){
                    this.total=res.data.total;
                    if(type && type === "loadmore"){
                        if(this.formConfig.selectLists.userIdList.length < res.data.total){
                            this.formConfig.selectLists.userIdList.push(
                                ...res.data.data.map((item)=>{
                                    return {
                                        label:item.name,
                                        value:item.id
                                    };
                                })
                            );
                        };
                    }else{
                        this.formConfig.selectLists.userIdList=res.data.data.map((item)=>{
                            return {
                                label:item.name,
                                value:item.id
                            };
                        });
                    };
                };
            });
        },
        // 初始化获取表格内数据
        getTableData(){
            getWifeData({
                pageNum:this.tableConfig.paginationsObj.currentPage,
                pageSize:this.tableConfig.paginationsObj.pageSize,
                startTime:this.searchConfig.submitData.startTime,
                endTime:this.searchConfig.submitData.endTime
            }).then((res)=>{
                if(res.code===1000){
                    this.tableConfig.tableData=res.data.data;
                    this.tableConfig.paginationsObj.total=res.data.total;
                };
            });
        }
    },
    mounted(){
        this.getTableData();
    }
}
</script>
<style lang="less" scoped>
.qilin-wifes {
    width: 100%;
    padding:0 10px 40px;
    .qilin-QilinSearch{
        .el-form{
            .search-separate{
                margin:0 10px;
            }
        }
    }
}
</style>